{include file="common/head"/}


<script type="application/javascript">
 
</script>
<section id="main-content">
    <section class="wrapper">
        <h3><i class="fa fa-angle-right"></i> 图文管理</h3>
        <div class="row mt">
            <div class="col-lg-12">
                <div class="form-panel">
                    {eq name="error" value="1"}
                    文章不存在
                    {else/}
                
                    <!-- BASIC FORM ELELEMNTS -->
                    <h4 class="mb"><i class="fa fa-angle-right"></i> 文章</h4> 
                    <form class="form-horizontal style-form" method="post" action="save">
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">文章ID</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" placeholder="{$id}" value="{$id}" name="id" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">文章名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" value="{$article.title}" name="title">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">描述</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" value="{$article.description}" name="description">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">文章内容</label>
                            <div class="col-sm-10">
                                <textarea type="text" rows="10" class="form-control" name="content">{$article.content}</textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">文章类别</label>
                            <div class="col-sm-10">
                                <select class="selectpicker" name="catgoryid">
                                    {volist name="categoryList" id="cat"}
                                    <option value="{$i}" {$i==$article.categoryid? 'selected' : ''}>{$cat}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">状态</label>
                            <div class="col-sm-10">
                                <div class="btn-group" data-toggle="buttons">
                                    <label class="btn btn-success {$article.status==1?'active':''}">
                                        <input type="radio" name="status" value="1" {$article.status==1?'checked=true':''}> 开启
                                    </label>
                                    <label class="btn {$article.status==0?'active':''}">
                                        <input type="radio" name="status" value="0" {$article.status==0?'checked=true':''}> 关闭
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">图片</label>
                            <div class="col-sm-10">
                                {eq name="article.thumb" value=""}
                                <input id="thumb" type="file" class="file" data-preview-file-type="text" >
                                {else/}
                                <input id="thumb" type="file" name="files[]" data-url="saveimg?id={$article.id}">
                                <div id="progress">
                                    <div class="bar" style="width: 0%; height: 18px; background: green;"></div>
                                </div>
                                <img id="preview" height="180px" width="270px" src="/public/static/{$article.thumb}"/>
                                {/eq}
                            </div>
                        </div>
                        <button type="submit" class="btn btn-success">保存</button>
                    </form>
                    {/eq}
                </div>
            </div><!-- col-lg-12-->   
        </div><!-- /row -->
    </section><! --/wrapper -->
</section><!-- /MAIN CONTENT -->


<script src="__STATIC__/common/js/bootstrap.min.js"></script> 
<!-- <script src="__ADMIN__/js/fileinput.min.js"></script>  -->
<script src="__ADMIN__/js/vendor/jquery.ui.widget.js"></script>
<script src="__ADMIN__/js/jquery.iframe-transport.js"></script>
<script src="__ADMIN__/js/jquery.fileupload.js"></script>


<!-- <script src="__ADMIN__/js/form-component.js"></script>   -->
<script type="application/javascript">
$(document).ready(function () {

    $('#thumb').fileupload({
        dataType: 'json',
        multipart: true,
        done: function (e, data) {
            console.log(data);
            console.log(data.result);
            if(data.result.code) {  
                // 上传成功：  
                $("#preview").attr('src', '/'+data.result.previewSrc);  
                // $(".preview").append("<div>"+data.result.msg+"</div>");  
            } else {  
                // 上传失败：  
                $("#progress .bar").css('background', 'red');
                // $(".upstatus").append("<div style='color:red;'>"+data.result.msg+"</div>");  
            }  
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $("#progress .bar").css('background', 'green');
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        }
    });

    // var preview = function imgPreview(){
    //     //判断是否支持FileReader
    //     if (window.FileReader) {
    //         var reader = new FileReader();
    //     } else {
    //         alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
    //     }

    //     console.log(111111);
    //     //获取文件
    //     var fileDom = $('input#thumb');
    //     if (!fileDom.files) {
    //         return;
    //     }
    //     var file = fileDom.files[0];
    //     var imageType = /^image\//;
    //     //是否是图片
    //     if (!imageType.test(file.type)) {
    //         alert("请选择图片！");
    //         return;
    //     }
    //     //读取完成
    //     reader.onload = function(e) {
    //         //获取图片dom
    //         var img = document.getElementById("preview");
    //         //图片路径设置为读取的图片
    //         img.src = e.target.result;
    //     };
    //     reader.readAsDataURL(file);
    // }

    // $('a#file-upload').click(function(){
    //     console.log($('input#thumb').files);
    //     var formData = new FormData();
    //     formData.append('file',$('input#thumb').files[0]);
    //     $.ajax({
    //         url:'save',
    //         type: 'POST',
    //         data: formData,
    //         //这两个设置项必填
    //         contentType: false,
    //         processData: false,
    //         success:function(data){
    //             console.log(data)
    //             var srcPath = data;
    //             console.log();
    //         　　　　 //注意这里的路径要根据自己的储存文件的路径设置
    //             $('.picDis img').attr('src', '..'+srcPath);
    //         }
    //     })
    // });

    // $('a#file-preview').click(function(){
    //     var input = $('input#thumb');
    //     input.click();
    //     input.on('change', function(){
    //         if (input.files) {
    //             console.log(123);
    //             preview();
    //         }
    //     })
    // });
    // var init_thumb = 'http://'+window.location.host+"/public/static/{$article.thumb}";
    // var init_title = ''+"{$article.title}";
    // var init_id = "{$article.id}";
    // console.log(init_id);
    // $("#thumb").fileinput({
    //     initialPreview: [init_thumb],
    //     initialPreviewAsData: true,
    //     uploadAsync:false,
    //     initialPreviewConfig: [
    //         {caption: init_title, filename: init_title, downloadUrl: init_thumb, width: "120px", key: 1}
    //     ],
    //     // deleteUrl: "/admin/article/imgdel/"+init_id,
    //     overwriteInitial: false,
    //     maxFileSize: 100,
    // });
    // $('#thumb').on('filedeleted', function(event, key, jqXHR, data) {
    //     console.log('Key = ' + key);
    // });
});
</script>